<template>
    <!--svg：图标外层容器节点，内部需要与use标签结合使用-->
    <svg :style="{ width, height, margin }">
        <!--设置执行的图标和颜色-->
        <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
</template>

<script setup lang="ts">
defineProps({
    //xlink:href属性值前缀
    prefix: {
        type: String,
        default: '#icon-',
    },
    //提供使用的图标的名字
    name: String,
    //接受父组件传递颜色
    color: {
        type: String,
        default: '',
    },
    //接受父组件传递宽度
    width: {
        type: String,
        default: '16px',
    },
    //接受父组件传递高度
    height: {
        type: String,
        default: '16px',
    },
    //接受父组件传递外边距
    margin: {
        type: String,
        default: '0',
    },
})
</script>

<style scoped></style>
